<template>
  <div :style="{ width: `${props.data.compWidth || 100}%` }">
    <div :style="style">{{ props.data.label }}</div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{ data: Record<string, any>; form: Record<string, any> }>()
const style = computed(() => {
  const css: any = { fontSize: `${props.data.fontSize}px`, textAlign: props.data.align }
  if (props.data.marginTop) {
    css.marginTop = `${props.data.marginTop}px`
  }
  if (props.data.marginRight) {
    css.marginRight = `${props.data.marginRight}px`
  }
  if (props.data.marginBottom) {
    css.marginBottom = `${props.data.marginBottom}px`
  }
  if (props.data.marginLeft) {
    css.marginLeft = `${props.data.marginLeft}px`
  }
  if (props.data.bold) {
    css.fontWeight = 'bold'
  }
  if (props.data.italic) {
    css.fontStyle = 'italic'
  }
  return css
})
</script>

<style lang="scss" scoped></style>
